<!--
 *                                                     __----~~~~~~~~~~~------___
 *                                    .  .   ~~//====......          __--~ ~~
 *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 *           '         ~-|      /|    |-~\~~       __--~~
 *                       |-~~-_/ |    |   ~\_   _-~            /\
 *                            /  \     \__   \/~                \__
 *                        _--~ _/ | .-~~____--~-/                  ~~==.
 *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 *                                  -_     ~\      ~~---l__i__i__i--~~_/
 *                                  _-~-__   ~)  \--______________--~~
 *                                //.-~~~-~_--~- |-------~~~~~~~~
 *                                       //.-~~~--\
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                               神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-22 17:56:59
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-23 11:12:25
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="model"
      :rules="rules"
      label-position="top"
      style="width: 300px"
    >
      <el-form-item prop="amount" label="充值金额">
        <el-input
          v-model="model.amount"
          :controls="false"
          placeholder="充值金额"
        >
          <template slot="append">CNY</template>
        </el-input>
      </el-form-item>
      <el-form-item prop="payType" label="支付方式">
        <el-radio-group v-model="model.payType" class="pay-type">
          <el-radio label="Alipay">
            <img src="~@/assets/img/AlipayLogo.png" />
          </el-radio>
          <el-radio label="WechatPay">
            <img src="~@/assets/img/WechatPayLogo.png" />
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="margin-top: 32px">
        <el-button style="width: 100px" type="primary" @click="handleSubmit">
          提交
        </el-button>
        <el-button @click="$router.push('/account/finance')">
          财务记录
        </el-button>
      </el-form-item>
    </el-form>
    <el-card shadow="never">
      <pro-table
        ref="pageBox"
        hide-head
        title="充值记录"
        :request="getList"
        :columns="columns"
      >
        <template #date="{ row }">
          {{ row.createTime | parseTime }}
        </template>
        <template #tiereds="{ row }">
          <ol style="margin: 0; padding: 0 0 0 20px">
            <li
              v-for="item in row.tiereds"
              :key="item.id"
              style="list-style: circle"
            >
              短信发送数量在
              <el-tag size="mini">{{ item.msgCount }}</el-tag>
              条以内，每条短信的费用为
              <el-tag size="mini">{{ item.price }}</el-tag>
              元
            </li>
          </ol>
        </template>
      </pro-table>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'Recharge',
  data() {
    return {
      model: {
        amount: '',
        payType: '',
      },
      rules: {
        amount: [
          {
            required: true,
            message: '请输入充值金额',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (!/^\d+$/.test(value + '')) {
                return callback(new Error(rule.message))
              }
              callback()
            },
            message: '请输入数字',
            trigger: 'blur',
          },
        ],
        payType: [
          {
            required: true,
            message: '请选择支付方式',
            trigger: 'change',
          },
        ],
      },
      columns: [
        {
          label: '计费阶梯名称',
          prop: 'name',
        },
        {
          label: '计费阶梯类型',
          prop: 'msgBillingType',
        },
        {
          label: '计费阶梯信息',
          tdSlot: 'tiereds',
          width: 400,
          wrap: true,
        },
        {
          label: '计费周期',
          prop: 'period',
          align: 'center',
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
        },
      ],
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {})
    },
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  id: '7000124',
                  msgBillingType: 'CARD',
                  name: '5G卡片消息',
                  desc: '5G卡片消息是由文本与多媒体信息，按钮组合而成的消息形式',
                  period: 'HALF_YEAR',
                  tiereds: [
                    {
                      id: '71',
                      msgCount: 1,
                      price: 0.15,
                      messageTieredId: '7000124',
                    },
                    {
                      id: '72',
                      msgCount: 2,
                      price: 2.0,
                      messageTieredId: '7000124',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2021-02-23T19:26:24.000+00:00',
                  lastModified: '2021-03-12T20:17:37.000+00:00',
                },
                {
                  id: '7000125',
                  msgBillingType: 'CARD_CAROUSEL',
                  name: '5G轮转卡片消息',
                  desc: '支持多卡片组成的轮转卡片消息形式',
                  period: 'HALF_YEAR',
                  tiereds: [
                    {
                      id: '66',
                      msgCount: 1,
                      price: 0.15,
                      messageTieredId: '7000125',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2021-02-23T19:26:31.000+00:00',
                  lastModified: '2021-03-12T20:18:42.000+00:00',
                },
                {
                  id: '16711487',
                  msgBillingType: 'MULTIMEDIA',
                  name: '5G多媒体消息',
                  desc: '5G多媒体消息，可以发送消息类型60秒语音、10M图片、500M的视频、500M的文件类型的消息，单卡片、多卡片、带浮动菜单的卡片消息',
                  period: 'HALF_YEAR',
                  tiereds: [
                    {
                      id: '70',
                      msgCount: 1,
                      price: 0.15,
                      messageTieredId: '16711487',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2021-01-24T18:58:53.000+00:00',
                  lastModified: '2021-03-12T19:35:20.000+00:00',
                },
                {
                  id: '16711488',
                  msgBillingType: 'TEXT',
                  name: '5G文本消息',
                  desc: '5G文本消息， 没有140字节的限制， 可以发送超大文本消息',
                  period: 'ONE_YEAR',
                  tiereds: [
                    {
                      id: '64',
                      msgCount: 1,
                      price: 0.05,
                      messageTieredId: '16711488',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2021-01-24T18:58:58.000+00:00',
                  lastModified: '2021-03-12T19:32:35.000+00:00',
                },
                {
                  id: '51821804083216384',
                  msgBillingType: 'SMS',
                  name: 'SMS',
                  desc: null,
                  period: 'ONE_MONTH',
                  tiereds: [
                    {
                      id: '68',
                      msgCount: 1,
                      price: 0.1,
                      messageTieredId: '51821804083216384',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2021-07-28T11:47:31.000+00:00',
                  lastModified: '2021-07-28T11:47:31.000+00:00',
                },
                {
                  id: '180239256059383425',
                  msgBillingType: 'SESSION',
                  name: '5G session messages',
                  desc: '5G会话消息计费',
                  period: 'HALF_YEAR',
                  tiereds: [
                    {
                      id: '75',
                      msgCount: 1,
                      price: 0.02,
                      messageTieredId: '180239256059383425',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2022-02-17T10:23:25.000+00:00',
                  lastModified: '2022-02-17T10:23:25.000+00:00',
                },
                {
                  id: '224446375184564224',
                  msgBillingType: 'AIM',
                  name: 'AIM',
                  desc: null,
                  period: 'ONE_MONTH',
                  tiereds: [
                    {
                      id: '76',
                      msgCount: 1,
                      price: 0.25,
                      messageTieredId: '224446375184564224',
                    },
                  ],
                  area: null,
                  enterpriseIds: [],
                  industries: [],
                  createTime: '2022-03-18T02:03:17.000+00:00',
                  lastModified: '2022-03-18T02:03:17.000+00:00',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.pay-type {
  img {
    width: 100px;
    vertical-align: middle;
  }
}
</style>
